{% extends 'host_manage/batch_cmd.html' %}
{% load staticfiles %}

{% block btn-type %}file_transfer{% endblock %}

{% block style %}
    {{ block.super }}
    <style>
        .info {
            padding-left: 0;
        }

        .layui-input-inline {
            margin-top: 8px;
        }

        .file-opt-area {
            margin-top: 10px;
        }
    </style>
{% endblock %}

{% block nav %}
    批量文件操作
{% endblock %}


{% block cmd_head %}
    批量文件操作
{% endblock %}

{% block cmd_option_area %}
    <div class="operation-area layui-form">
        <div class="info col-lg-3 col-md-3 col-sm-3">
            <blockquote class="layui-elem-quote">选择文件类型</blockquote>
        </div>
        <div class="layui-input-inline">
            <select id="file_transfer_hook" lay-filter="file_transfer" name="transfer_type">
                <option value="file_upload">传送本地文件到远程</option>
                <option value="file_download">从远程下载文件</option>
            </select>
        </div>
        <hr class="layui-bg-green">
        <div class="file_upload-area">
            <div class="layui-upload-drag" id="file_upload">
                <i class="layui-icon"></i>
                <p id="file_info_hook">选择要传送的文件，点击上传，或将文件拖拽到此处</p>
            </div>
            <div class="layui-form layui-form-pane" style="margin-top: 10px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">远程目录</label>
                    <div class="layui-input-inline" style="margin-top: 0; min-width: 300px;">
                        <input id="remote_path_hook" name="username" placeholder="请输入要传送到远程主机的目录路径" autocomplete="off"
                               class="layui-input"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="file_download-area" style="display: none;">
            <div class="layui-form layui-form-pane" style="margin-top: 10px;">
                <div class="alert alert-info alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <strong>提示!</strong> 请在右侧主机列表选择主机
                </div>
                <div id="remote_host_showing"></div>
            </div>
        </div>
    </div>
{% endblock %}


{% block scopejs %}
    <script>
        /**
         * cmd专属
         */
        (() => {
            $(".host-manage").addClass("active");
            $(".batch_file").addClass("active");
        })();
    </script>
{% endblock %}


{% block js %}
    {{ block.super }}
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use('upload', function () {
            let upload = layui.upload;
            // 设定文件大小限制
            upload.render({
                elem: '#file_upload'
                , url: "{% url 'file_transfer' %}"
                , size: 1024 * 1024       // 限制文件大小，单位 KB, 允许1GB
                , headers: {"X-CSRFToken": csrfToken}
                , accept: 'file'
                , done: function (data) {
                    if (parseInt(data['status_code']) === 500) {
                        alert(data['info']);
                    } else if (parseInt(data['status_code']) === 200) {
                        // 此时，文件已经上传到了堡垒机，将文件在堡垒机中的地址存起来，方便后面传输
                        window.localStorage.setItem("file_path", data['file_path']);
                        let fileInfoDom = $("#file_info_hook");
                        fileInfoDom.html("文件选择成功！请输入要传送到远程主机路径...");
                        fileInfoDom.css({
                            color: "#f0ad4e",
                            fontWeight: "700",
                        });
                    }
                }
            });
        });
    </script>
    <script src="{% static 'js/file_style.js' %}"></script>
    <script>
        layui.use('form', function () {
            let form = this.form;
            // 监听select框修改事件
            let prevDom = $(".file_upload-area");
            form.on('select(file_transfer)', (data) => {
                // 隐藏上一个区域
                prevDom.css("display", "none");
                prevDom = $(`.${data.value}-area`).css("display", "block");

                let hostDom = $("#host_hook li div");
                if (flag) {
                    // 获取所有被选中的主机
                    let checkDoms = $(".host-to-remote-user:checked");
                    // 主机去重
                    let host_to_remote_users = [];
                    let host_to_remote_user_ids = [];
                    $.each(checkDoms, function (index, item) {
                        if (host_to_remote_user_ids.indexOf($(item).val()) === -1) {
                            host_to_remote_users.push(item);
                            host_to_remote_user_ids.push($(item).val());
                        }
                    });
                    // 将所有的已选中的主机添加到右侧的面板
                    initHostInput(host_to_remote_users);
                    // 绑定点击事件
                    hostDom.each(function () {
                        this.isSelect = host_to_remote_users.indexOf($(this).prev().get(0)) === -1;
                    });
                    hostDom.bind("click", hostSelect);
                } else {
                    hostDom.unbind("click", hostSelect);
                }
                flag = !flag;
            });
        });
    </script>
{% endblock %}
